<!--
 * @Descripttion: word预览
 * @Author: jiansheng
 * @Date: 2022-12-05 11:05:06
-->
<template>
  <div>
    <p>测试</p>
    <div id="bodyContainer" ref="file"></div>
    <div
      id="fileView"
      style="
        margin: 0px;
        padding: 0px;
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0px;
        top: 0px;
      "
    ></div>
  </div>
</template>
<script>
import { renderAsync } from "docx-preview";
import LuckyExcel from "luckyexcel";
export default {
  mounted() {
    this.$nextTick(() => {
      // docx预览方式
      // this.urlToBlob('http://172.17.2.227:9522/stage-api/profile/upload/2022/12/05/4791aa13-4552-4467-a396-7839b8b88d94.docx', (r) => {
      //   this.wordView(r)
      // });

      // excel预览方式
      this.excelView('https://minio.cnbabylon.com/public/luckysheet/Blue%20mileage%20and%20expense%20report.xlsx')
    });
  },
  methods: {
    urlToBlob(url, callback) {
      let xhr = new XMLHttpRequest();
      xhr.open("get", url, true);
      xhr.responseType = "blob";
      xhr.onload = () => {
        if (xhr.status === 200) {
          callback && callback(xhr.response);
        }
      };
      xhr.send();
    },
    wordView(buffer) { // docx 预览
      let bodyContainer = document.getElementById("bodyContainer");
      renderAsync(
        buffer, // Blob | ArrayBuffer | Uint8Array, 可以是 JSZip.loadAsync 支持的任何类型
        bodyContainer, // HTMLElement 渲染文档内容的元素,
        null, // HTMLElement, 用于呈现文档样式、数字、字体的元素。如果为 null，则将使用 bodyContainer。
        {
          className: "docx", // string：默认和文档样式类的类名/前缀
          inWrapper: true, // boolean：启用围绕文档内容的包装器渲染
          ignoreWidth: false, // boolean：禁用页面的渲染宽度
          ignoreHeight: false, // boolean：禁止渲染页面高度
          ignoreFonts: false, // boolean：禁用字体渲染
          breakPages: true, // boolean：在分页符上启用分页
          ignoreLastRenderedPageBreak: true, // boolean：在 lastRenderedPageBreak 元素上禁用分页
          experimental: false, // boolean：启用实验功能（制表符停止计算）
          trimXmlDeclaration: true, // boolean：如果为true，解析前会从 xml 文档中移除 xml 声明
          useBase64URL: false, // boolean：如果为true，图片、字体等会转为base 64 URL，否则使用URL.createObjectURL
          useMathMLPolyfill: false, // boolean：包括用于 chrome、edge 等的 MathML polyfill。
          showChanges: false, // boolean：启用文档更改的实验性渲染（插入/删除）
          debug: false, // boolean：启用额外的日志记录
        }
      ).then((res) => {
        console.log("docx加载成功", res);
      });
    },
    excelView(url) { // xlsx预览
      LuckyExcel.transformExcelToLuckyByUrl(
        url,
        "",
        (exportJson) => {
          if (exportJson.sheets == null || exportJson.sheets.length == 0) {
            this.$message.error("文件读取失败!")
            return;
          }
          // 销毁原来的表格
          window.luckysheet.destroy();
          // 重新创建新表格
          window.luckysheet.create({
            container: "fileView", // 设定DOM容器的id
            showtoolbar: false, // 是否显示工具栏
            showinfobar: false, // 是否显示顶部信息栏
            showstatisticBar: false, // 是否显示底部计数栏
            sheetBottomConfig: false, // sheet页下方的添加行按钮和回到顶部按钮配置
            allowEdit: false, // 是否允许前台编辑
            enableAddRow: false, // 是否允许增加行
            enableAddCol: false, // 是否允许增加列
            sheetFormulaBar: false, // 是否显示公式栏
            enableAddBackTop: false, //返回头部按钮
            data: exportJson.sheets, //表格内容
            title: exportJson.info.name, //表格标题
          });
        }
      );
    },
  },
};
</script>
